<script setup>
import { updateUser } from "@/api/user";
import { reactive, ref, watch } from "vue";
import "@material/web/textfield/outlined-text-field.js";
import "@material/web/button/text-button";
import MaterialCheckbox from "@/components/MaterialCheckbox.vue";
import MaterialDialog from "@/components/MaterialDialog.vue";

const props = defineProps(["open", "user"]);
const emit = defineEmits(["open", "close", "done", "error"]);

const editUserForm = ref(null);
const repeatPassword = ref(null);

const formData = reactive({
  username: "",
  password: "",
  repeatPassword: "",
  isAdmin: false
});

watch(() => props.open, open => {
  if (open) {
    editUserForm.value.reset();
  }
});

watch(formData, () => {
  checkValidity();
});

function checkValidity() {
  if (formData.password != formData.repeatPassword) {
    repeatPassword.value.setCustomValidity("两次输入的密码不相同");
    return false;
  }
  repeatPassword.value.setCustomValidity(null);
  return true;
}

async function onSubmit() {
  if (!editUserForm.value.reportValidity()) {
    return;
  }
  emit("close");
  try {
    let user = {
      username: formData.username,
      isAdmin: formData.isAdmin
    };
    if (formData.password != "") {
      user.password = formData.password;
    }
    await updateUser(props.user.id, user);
    emit("done");
  } catch (ex) {
    emit("error", ex.toString());
  }
}

function onReset() {
  formData.username = props.user.username || "";
  formData.password = "";
  formData.repeatPassword = "";
  formData.isAdmin = props.user.isAdmin;
}
</script>

<template>
  <MaterialDialog :open="open" @close="$emit('close')">
    <template #headline>
      修改用户
    </template>

    <template #content>
      <form id="edit-user-form" ref="editUserForm" @submit.prevent="onSubmit" @reset.prevent="onReset">
        <p>
          <md-outlined-text-field label="用户名" type="username" required
            @keypress.enter.prevent="() => { $refs.editUserForm.requestSubmit() }" autocomplete="username"
            v-model="formData.username">
          </md-outlined-text-field>
        </p>
        <p>
          <md-outlined-text-field label="密码" supporting-text="不填写则为不修改" type="password"
            @keypress.enter.prevent="() => { $refs.editUserForm.requestSubmit() }" autocomplete="new-password"
            v-model="formData.password">
          </md-outlined-text-field>
        </p>
        <p>
          <md-outlined-text-field ref="repeatPassword" label="确认密码" type="password"
            @keypress.enter.prevent="() => { $refs.editUserForm.requestSubmit() }" autocomplete="new-password"
            v-model="formData.repeatPassword">
          </md-outlined-text-field>
        </p>
        <p>
          <label>
            <MaterialCheckbox v-model="formData.isAdmin"></MaterialCheckbox>
            管理员用户
          </label>
        </p>
      </form>
    </template>

    <template #actions>
      <md-text-button type="reset" form="edit-user-form">重置</md-text-button>
      <div style="flex: 1"></div>
      <md-text-button @click="$emit('close')">取消</md-text-button>
      <md-text-button type="submit" @click="() => { $refs.editUserForm.requestSubmit() }">修改</md-text-button>
    </template>
  </MaterialDialog>
</template>

<style>
#edit-user-form>p {
  margin-bottom: 16px;
}

#edit-user-form>p:last-child {
  margin-bottom: 0;
}
</style>